<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- import Vue.js -->
		<script src="//vuejs.org/js/vue.min.js"></script>
		<!-- import stylesheet -->
		<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
		<!-- import iView -->
		<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
		<style>
			.ivu-table .demo-table-info-row td {
				background-color:rgba(3, 45, 48, 1);
				/* 文字颜色 */
				color: #fff; 
			}
		</style>
	</head>
	<body>

		<div id="app">
			<div style="background-color: #000000;">
				<br />
				<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1" width="500" style="margin: 20px;"></i-table>
				<br />
			</div>
		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					columns1: [{
							title: 'Name',
							key: 'name',
						},
						{
							title: 'Age',
							key: 'age',
						},
						{
							title: 'Address',
							key: 'address',
						}
					],
					data1: [{
							name: 'John Brown',
							age: 18,
							address: 'New York No. 1 Lake Park',
							date: '2016-10-03'
						},
						{
							name: 'Jim Green',
							age: 24,
							address: 'London No. 1 Lake Park',
							date: '2016-10-01'
						},
						{
							name: 'Joe Black',
							age: 30,
							address: 'Sydney No. 1 Lake Park',
							date: '2016-10-02'
						},
						{
							name: 'Jon Snow',
							age: 26,
							address: 'Ottawa No. 2 Lake Park',
							date: '2016-10-04'
						}
					]
				},
				methods: {
					rowClassName() {
						return 'demo-table-info-row';
					}
				}
			})
		</script>
	</body>


</html>
